<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type="text/css">
	#workspaceContainer {
		width: 1000px;
	}
  
	#tools {
		float: left;
		width: 320px;
	}
  
	#workspace {
		float: right;
		width: 595px;
		background-color: yellow;
	}
	
	.tool {
		height: 75px;
		border: 1px solid black;
	}
	
	.toolTitle{
		margin-left: 5px;
	}
	
	.slider {
		float: left;
		width: 150px;
		margin-top: 15px;
		margin-left: 5px;
	}
	
	.sliderLabel {
		top: 0;
		float: right;
	}
	
	#imageSizeSliderValue .label {
		margin-right: 5px;
	}
	
	/*
	Also if you use float it affectivly removes that element from any surrounding div. To get around this problem try and add a div class which has 'clear' set to 'both' to your html. This make all the divs sit nicely in there container
	Like this:
	*/
	.clear { 
		clear: both;
	}
  </style>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="photoEditor" title="Dialog Title">
	<div id="workspaceContainer">
		<div id="tools">
			<div class="tool">
				<div class="toolTitle">Image size</div>
				<div id="imageSizeSlider" class="slider"></div>
				<div id="imageSizeSliderValue" class="sliderLabel">
					<span class="label">100%</span>
					<button class="sliderReset">Reset</button>
				</div>
			</div>
		</div>
		<div id="workspace">
			<div id="imageLayer">
				<img src="/canvas.jpg" width="200" height="200"/>
			</div>
		</div>
		<div class="clear"></div>
	</div>
</div>
 
<script>
$( "#photoEditor" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
	$("#photoEditor" ).dialog({
	  width: 1100,
	  height: 600,
	  autoOpen: false,
	  show: {
		effect: "blind",
		duration: 250
	  },
	  hide: {
		effect: "blind",
		duration: 250
	  }
	}); 
  $( "#photoEditor" ).dialog( "open");
});
$("#workspace").parent().css("background-color","red");
$("#workspace #imageLayer").draggable({
	containment: $("#workspace").parent()
	//containment: 'parent'
    /*containment: "parent",*/
    /*scroll: false*/
	/*var minX = 0; // farthest to left it can go
var maxX = 100; // farthest to right it can go
var yPosition = 0; // set to your y position

$('#draggable').draggable({
      containment: [minX,yPosition,maxX,yPosition]
});*/

	//containment: [200,800]
});

function getLeftDraggableBound(){
	var left = $("#workspace").parent().position().left;
	var imageWidth = $("#workspace #imageLayer img").attr("width");
	var leftBound = left + imageWidth
}


$( "#imageSizeSlider" ).slider({
	//50 on slider == image size of 100%
	value: 50,
	min: 5,
	change: function( event, ui ) {
		var imageResizePercentage = getImageResizePercentage(ui) + "%";
		$("#imageLayer img").attr('width', imageResizePercentage);
		$("#imageLayer img").attr('height', imageResizePercentage);
		
		var toolHolder = $(this).parent(); //container with the slider, label, ...
		var correspondingLabel = $(toolHolder).find(".label");
		$(correspondingLabel).html(imageResizePercentage);
	},
	slide: function(event, ui) {
		var imageResizePercentage = getImageResizePercentage(ui);
		$("#imageSizeSliderValue .label").html(imageResizePercentage + "%");
	}
});

function getImageResizePercentage(ui){
	var value = ui.value;
	var imageResizePercentage = value * 2; //as 50% on slider == 100% on image
	return imageResizePercentage;
}

$(".sliderReset").click(function(e){
	var toolHolder = $(this).parent().parent(); //container with the slider, label, ...
	var correspondingSlider = $(toolHolder).find(".slider");
	$(correspondingSlider).slider('value', 50);
});


$('#workspace #imageLayer').resizable({ handles: "all" });
$("button").button();
</script>
 
</body>
</html>